<template>
    <div class="app-container">
        <div class="search-div">
            <el-form label-width="70px" size="small">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="关 键 字">
                            <el-input style="width: 95%" v-model="searchObj.keyword" placeholder="用户名/姓名/手机号码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="操作时间">
                            <el-date-picker v-model="createTimes" type="datetimerange" range-separator="至"
                                start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"
                                style="margin-right: 10px;width: 100%;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="display:flex">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData()">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
                </el-row>
            </el-form>
        </div>

        <!-- 工具条 -->
        <div class="tools-div">
            <!-- <el-button type="success" :disabled="$hasBP('bnt.sysUser.add')  === false" icon="el-icon-plus" size="mini" @click="add">添 加</el-button> -->
            <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
        </div>

        <!-- 列表 -->
        <el-table v-loading="listLoading" :data="list" stripe border style="width: 100%;margin-top: 10px;">

            <el-table-column label="序号" width="70" align="center">
                <template slot-scope="scope">
                    {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>

            <el-table-column prop="recordName" label="记录名称" />
            <el-table-column prop="courseName" label="考试课程" />
            <el-table-column prop="examType" label="考试类型" :formatter="handleFormatter" />
            <el-table-column prop="examTime" label="考试年度" />
            <!-- <el-table-column label="状态" width="80">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status===1"
                @change="switchStatus(scope.row)">
              </el-switch>
            </template>
          </el-table-column> -->
            <el-table-column prop="createTime" label="创建时间" />

            <el-table-column label="操作" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改" />
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)"
                        title="删除" />
                    <el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignRole(scope.row)"
                        title="分配角色" />
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination :current-page="page" :total="total" :page-size="limit" style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper" @current-change="fetchData" />

        <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
            <el-form ref="dataForm" :model="sysUser" label-width="100px" size="small" style="padding-right: 40px;">
                <el-form-item label="学生姓名" prop="name">
                    <el-input v-model="sysUser.name" />
                </el-form-item>
                <el-form-item label="所属年级" prop="gradeId">
                    <el-select v-model="sysUser.gradeId" @change="handleChange">
                        <el-option v-for="item in gradeList" :key="item.id" :label="item.gradeName"
                            :value="item.id"></el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="所属班级" prop="classId">
                    <el-select v-model="sysUser.classId" @change="handleClassChange">
                        <el-option v-for="item in classList" :key="item.id" :label="item.className"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
                <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import api from '@/api/scoreRecord.js'

export default {
    data() {
        return {
            listLoading: false, // 数据是否正在加载
            list: null, // 列表
            total: 0, // 数据库中的总记录数
            page: 1, // 默认页码
            limit: 10, // 每页记录数
            searchObj: {}, // 查询表单对象

            createTimes: [],

            dialogVisible: false,
            sysUser: {},

            dialogRoleVisible: false,
            allRoles: [], // 所有角色列表
            userRoleIds: [], // 用户的角色ID的列表
            isIndeterminate: false, // 是否是不确定的
            checkAll: false, // 是否全选
            gradeList: [],
            classList: []
        }
    },
    created() {
        //调用列表方法
        this.fetchData()
        gradeApi.list().then(res => {
            if (res.code == 200) {
                this.gradeList = res.data;
            }
        })

    },
    methods: {
        handleFormatter(row, column) {
            console.log("row", row);
            console.log("column", column);
            const { property } = column;
            if (property == 'examType') {
                switch (row[property]) {
                    case '0': return '期中考试';
                    case '1': return '期末考试'
                }
            }
        },
        handleChange(val) {
            console.log("val", val);
            classApi.getClassByGradeId(val).then(res => {
                this.classList = res.data;
                console.log("resss", res);
            })
            if (val) {
                const findObj = this.gradeList.find(item => item.id == val);
                this.sysUser.gradeName = findObj ? findObj.gradeName : ""
            } else {
                this.sysUser.gradeName = ""
            }

        },
        handleClassChange(val) {
            if (val) {
                const findObj = this.classList.find(item => item.id == val);
                this.sysUser.className = findObj ? findObj.className : ""
            } else {
                this.sysUser.className = ""
            }
        },
        /*
        全选勾选状态发生改变的监听
        */
        handleCheckAllChange(value) {// value 当前勾选状态true/false
            // 如果当前全选, userRoleIds就是所有角色id的数组, 否则是空数组
            this.userRoleIds = value ? this.allRoles.map(item => item.id) : []
            // 如果当前不是全选也不全不选时, 指定为false
            this.isIndeterminate = false
        },

        /*
        角色列表选中项发生改变的监听
        */
        handleCheckedChange(value) {
            const { userRoleIds, allRoles } = this
            this.checkAll = userRoleIds.length === allRoles.length && allRoles.length > 0
            this.isIndeterminate = userRoleIds.length > 0 && userRoleIds.length < allRoles.length
        },

        //更改用户状态
        switchStatus(row) {
            //判断，如果当前用户可用，修改禁用
            row.status = row.status === 1 ? 0 : 1
            api.updateStatus(row.id, row.status)
                .then(response => {
                    this.$message.success(response.message || '操作成功')
                    this.fetchData()
                })
        },
        //删除
        removeDataById(id) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //调用方法删除
                api.delete(id)
                    .then(response => {
                        //提示
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        //刷新
                        this.fetchData()
                    })
            })
        },
        //根据id查询，数据回显
        edit(id) {
            // api.getInfo(id).then(res=>{
            //     console.log("infoRes",res)
            // })
            this.$router.push({
                path:"/system/scoreRecordEdit",
                query:{
                    id
                }
            })
        },
        //添加或者修改方法
        saveOrUpdate() {
            if (!this.sysUser.id) {
                this.save()
            } else {
                this.update()
            }
        },
        //修改
        update() {
            api.update(this.sysUser)
                .then(response => {
                    //提示
                    this.$message.success('操作成功')
                    //关闭弹框
                    this.dialogVisible = false
                    //刷新
                    this.fetchData()
                })
        },
        //添加
        save() {
            api.save(this.sysUser)
                .then(response => {
                    //提示
                    this.$message.success('操作成功')
                    //关闭弹框
                    this.dialogVisible = false
                    //刷新
                    this.fetchData()
                })
        },
        //添加弹框的方法
        add() {
            this.dialogVisible = true
            this.sysUser = {}
        },
        // 重置查询表单
        resetData() {
            console.log('重置查询表单')
            this.searchObj = {}
            this.createTimes = []
            this.fetchData()
        },
        //列表
        fetchData(page = 1) {
            this.page = page
            if (this.createTimes && this.createTimes.length == 2) {
                this.searchObj.createTimeBegin = this.createTimes[0]
                this.searchObj.createTimeEnd = this.createTimes[1]
            }
            api.getPageList(this.page, this.limit, this.searchObj)
                .then(response => {
                    this.list = response.data.records
                    this.total = response.data.total
                })
        }
    }
}
</script>